<template>
  <div class="step flex_aic_jcc mt50">
    <div
      class="step-item flex"
      :class="{ active: stepCurrent === index }"
      v-for="(item, index) in stepList"
      :key="item.label"
    >
      <div class="left_line"></div>
      <div class="flex_fdc_aic">
        <div class="step-item-icon">
          <img :src="getIcon(item.icon, index)" alt="" />
        </div>
        <div class="step-item-label mt10">
          {{ item.label }}
        </div>
        <div class="step-item-time lht-20" style="height: 20px">
          {{ item.time }}
        </div>
      </div>
      <div class="right_line"></div>
    </div>
  </div>
  <div class="flex_aic_jcc mt50 mb40 fs-26">
    {{ stepTips[props.detail?.status] }}
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from "vue";
import moment from "moment";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const stepName = ref(t('fundMana.step.等待店铺确认'));
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
});

const iconMap = {
  // fabu: new URL(`@/assets/images/order_lists/fabu.png`, import.meta.url).href,
  // fabugray: new URL(`@/assets/images/order_lists/fabu-gray.png`, import.meta.url).href,
  // fabuhot: new URL(`@/assets/images/order_lists/fabu-hot.png`, import.meta.url).href,

  // fukuan: new URL(`@/assets/images/order_lists/fukuan.png`, import.meta.url).href,
  // fukuangray: new URL(`@/assets/images/order_lists/fukuan-gray.png`, import.meta.url).href,
  // fukuanhot: new URL(`@/assets/images/order_lists/fukuan-hot.png`, import.meta.url).href,

  // fahuo: new URL(`@/assets/images/order_lists/fahuo.png`, import.meta.url).href,
  // fahuogray: new URL(`@/assets/images/order_lists/fahuo-gray.png`, import.meta.url).href,
  // fahuohot: new URL(`@/assets/images/order_lists/fahuo-hot.png`, import.meta.url).href,

  fabu: new URL(`@/assets/images/order_lists/fabu.png`, import.meta.url).href,
  fabugray: new URL(`@/assets/images/order_lists/wancheng-gray.png`, import.meta.url).href,
  fabuhot: new URL(`@/assets/images/order_lists/wancheng-hot.png`, import.meta.url).href,
};

const step1 = ref([
  // {
  //   label: "发起结算",
  //   time: "",
  //   icon: "fabu",
  // },
  {
    label: t('fundMana.step.店铺发起'),
    time: "",
    icon: "fabu",
  },
  {
    label: t('fundMana.step.平台付款'),
    time: "",
    icon: "fabu",
  },
  {
    label: t('fundMana.step.结算完成'),
    time: "",
    icon: "fabu",
  },
]);

const step2 = ref([
  {
    label: t('fundMana.step.发起结算'),
    time: "",
    icon: "fabu",
  },
  {
    label: t('fundMana.step.审核驳回'),
    time: "",
    icon: "fabu",
  },
]);

const stepTips = {
  1: t('fundMana.step.等待平台审核'),
  2: t('fundMana.step.等待平台付款'),
  3: t('fundMana.step.平台已付款'),
  "-1": t('fundMana.step.审核驳回'),
};

const stepList = computed(() => {
  return props.detail?.status === -1 ? step2.value : step1.value;
});
const stepCurrent = computed(() => {
  return props.detail?.status == -1 ? 1 : (props.detail?.status - 1);
});
const getIcon = (icon, index) => {
  let _icon = "";
  if (stepCurrent.value === index) {
    _icon = `${icon}hot`;
  } else if (stepCurrent.value > index) {
    _icon = `${icon}`;
  } else {
    _icon = `${icon}gray`;
  }
  return iconMap[_icon]
  // try {
  //   return `/src/assets/images/order_lists/${_icon}.png`;
  // } catch (error) {
  //   return ""; // 返回空字符串或默认图标路径
  // }
};

watch(
  () => props.detail,
  (newVal) => {
    step1.value[0].time = newVal?.createdTime
      ? moment(newVal?.createdTime).format("YYYY-MM-DD HH:mm:ss")
      : "";
    step1.value[1].time = newVal?.platformTime
      ? moment(newVal?.platformTime).format("YYYY-MM-DD HH:mm:ss")
      : "";
    step1.value[2].time = newVal?.finishTime
      ? moment(newVal?.finishTime).format("YYYY-MM-DD HH:mm:ss")
      : "";
  },
  { deep: true }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.step {
  .step-item {
    &-icon {
      img {
        width: 75px;
        height: 75px;
      }
    }
    &-label {
      color: rgb(153, 153, 153);
      line-height: 22px;
    }
    &-time {
      color: rgba(24, 144, 255, 0.5);
      line-height: 22px;
    }

    &.active {
      .left_line,
      .right_line {
        background-color: #1890ff;
      }
      .step-item-label {
        color: #1890ff;
      }
    }

    .left_line,
    .right_line {
      width: 50px;
      height: 1px;
      background-color: #e5e5e5;
      margin-top: 37.5px;
    }
  }
}

.mt50 {
  margin-top: 50px;
}
</style>
